<template>
	<view class="content">
		<div>
			<view>
				<!-- 照片 -->
				<van-image class="image" width="100" height="100" src="https://img.yzcdn.cn/vant/cat.jpeg" />
				<view class="data">
					<!-- 标题地址时间 -->
					<view style="font-size: 17px;">活动：{{activity.headline}}</view>
					<view>
						<van-icon name="location-o" /><span style='font-size: 15px;'>地址：</span><span
							style='font-size: 13px;'>{{activity.address}}</span>
					</view>
					<view>
						<van-icon name="underway-o" /><span style='font-size: 15px;'>时间：</span><span
							style='font-size: 13px;'>{{activity.beginTime}}</span>
					</view>
				</view>
			</view>
		</div>
		<!-- 门票 -->
		<van-radio-group :value="radio" @change="onChangeRadio()">
			<view style="font-size: 16px;margin-top: 10px;background-color: white;" v-for=" item in ticket"
				:key="item.id">
				<van-radio :name="item.id">
					<view class="ticket" @click="onChangeTicket(item.id)">
						<view>
							{{item.name}}
						</view>
						<view style="color: #4CD964;margin-top: 10px;">
							¥：{{item.price}}
						</view>
					</view>
				</van-radio>
			</view>
		</van-radio-group>
		<!-- 弹出框 -->
		<van-dialog id="van-dialog" />
		<!-- 选票转下页 -->
		<view style='background-color: #e1e1e1;'>
			<van-goods-action style='background-color: white;'>
				数量：
				<van-stepper :value="value" @change="ChangeTicketNum()" />
				<van-goods-action-button color="#45b97c" type="danger" text="立即报名" @click="toVote(index)" />
			</van-goods-action>
		</view>
	</view>
</template>

<script>
	import Dialog from "../../static/vant/dist/dialog/dialog"
	export default {
		data() {
			return {
				radio: '1',
				title: 'Hello',
				value: 1,
				activity: {
					address: '',
					beginTime: '',
					context: '',
					createTime: '',
					creator: '',
					endTime: '',
					expire: '',
					headline: '',
					id: '',
					label: '',
					peopleNum: '',
					plate: '',
					poster: "poster_delb9",
					publisherId: '',
					recommend: '',
					spotlight: '',
					type: '',
					updateTime: '',
					updater: ''
				},
				ticket: [],
				ticketId: 0,
				ticketdom: '',
				form: {
					activityId: '',
					userId: '',
					ticketId: '',
					ticketNum: ''
				},
			}
		},
		onLoad: function(option) {
			var options = JSON.parse(decodeURIComponent(option.activity))
			this.form.userId = option.userId
			this.activity = options
			console.log(options)
			this.findTicket()
		},
		created() {
			this.value = 1
		},
		mounted() {
			
		},
		methods: {
			// 选票
			onChangeRadio(event) {
				this.radio = event.detail
			},
			// 门票数量
			ChangeTicketNum(event) {
				console.log(event.detail);
				this.value = event.detail
			},
			// 门票数量（废）
			valchange(e) {
				this.value = e.value
			},
			// 门票id
			onChangeTicket(e) {
				this.ticketId = e
			},
			// 查门票
			findTicket(e) {
				uni.request({
					url: 'http://localhost:8083/activity/ticket/' + this.activity.id,
					method: "GET",
					success: (res) => {
						console.log(res.data.data);
						this.ticket = res.data.data
					}
				})
			},
			// 转报名表页面方法
			toVote(e) {
				if (this.ticketId == 0) {
					Dialog.alert({
						message: '请选择门票',
					}).then(() => {
						// on close
					});
				} else {
					this.form.ticketId = this.ticketId
					this.form.ticketNum = this.value
					this.form.activityId = this.activity.id
					uni.navigateTo({
						// url:"/pages/applicationForm/vote?activityId="+activityId
						url: "/pages/applicationForm/applicationForm?activity=" + encodeURIComponent(JSON
								.stringify(
									this.activity)) +
							"&form=" + encodeURIComponent(JSON.stringify(this.form)),
					})
				}

			}
		}
	}
</script>

<style>
	.ticket {
		width: 260px;
		padding-top: 20px;
		padding-bottom: 20px;
		padding-left: 25px;
		margin-top: 16px;
		background-color: #ced5ce;
	}

	.content {
		display: flex;
		flex-direction: column;
		background-color: #efefef;
	}

	.image {
		float: left;
	}

	.data {
		width: 190px;
		border: #000000;
		margin-right: 5px;
		margin: auto;
		float: left;
	}

	.logo {
		height: 200rpx;
		width: 200rpx;
		margin-top: 200rpx;
		margin-left: auto;
		margin-right: auto;
		margin-bottom: 50rpx;
	}

	.text-area {
		display: flex;
		justify-content: center;
	}

	.title {
		font-size: 36rpx;
		color: #8f8f94;
	}
</style>
